<template>
  <div class="box">
    <div class="box_top">
      <div class="box_nav">
        <i class="icon iconfont icon-bianji"></i>宝塔区窑店在线学习统计
      </div>
      <div class="box_title flex">
        <div class="box_title_lf flex" @click="searchDateClick(1)">
          <div class="title_time_lf">{{ Query.startTime }}</div>
          <div class="title_time_lr">
            <i class="icon iconfont icon-bianji"></i>
          </div>
        </div>
        <div class="box_title_lr flex" @click="searchDateClick(2)">
          <div class="title_time_lf">{{ Query.endTime }}</div>
          <div class="title_time_lr">
            <i class="icon iconfont icon-bianji"></i>
          </div>
        </div>
        <div class="box_title_search">
          <div>查询</div>
        </div>
      </div>
      <div class="box_main_bd">
        <div class="box_main_echarts">
          <zhexian></zhexian>
        </div>
      </div>
    </div>
    <div class="box_top">
      <div class="box_nav">
        <i class="icon iconfont icon-bianji"></i>宝塔区窑店登陆统计
      </div>
      <div class="box_title flex">
        <div class="box_title_lf flex" @click="searchDateClick(1)">
          <div class="title_time_lf">{{ Query.startTime }}</div>
          <div class="title_time_lr">
            <i class="icon iconfont icon-bianji"></i>
          </div>
        </div>
        <div class="box_title_lr flex" @click="searchDateClick(2)">
          <div class="title_time_lf">{{ Query.endTime }}</div>
          <div class="title_time_lr">
            <i class="icon iconfont icon-bianji"></i>
          </div>
        </div>
        <div class="box_title_search">
          <div>查询</div>
        </div>
      </div>
      <div class="box_main_bd">
        <div class="box_main_echarts">
          <zhexians></zhexians>
        </div>
      </div>
    </div>
    <!-- 选择时间弹出框 -->
    <dateModel @message="canifmDateClick" @cancel="cancelDateClick" :time="timeVal" :dataState="dataStateVal"></dateModel>
  </div>
</template>
<script>
let echarts = require("echarts");
import taskApi from "../../requestApi/taskApi";
import dateModel from "../../components/Module/dateModel";
import { Toast } from "mint-ui";
import zhexian from "./zhexian";
import zhexians from "./zhexians";
export default {
  components: { dateModel, zhexian, zhexians },
  data() {
    return {
      Query: {
        startTime: "请选择",
        endTime: "请选择"
      },
      // 日期
      timeIndex: 1,
      dataStateVal: false,
      timeVal: "请选择",
      xLists: ["#FE6E39", "#F6991B", "#639FC9", "#C5DB49"],
      yLists: [
        { value: 335, name: "延期项目", color: "#FE6E39" },
        { value: 310, name: "预警项目", color: "#F6991B" },
        { value: 234, name: "正常项目", color: "#639FC9" },
        { value: 135, name: "完结项目", color: "#C5DB49" }
      ]
    };
  },
  created: function() {},
  mounted() {
    // this.listFun();
    let self = this;
    this.titleFun({
      title: "项目统计"
    });
    // this.mapListsFun();
  },
  methods: {
    searchDateClick(i) {
      this.dataStateVal = true;
      this.timeIndex = i;
    },
    canifmDateClick(val) {
      let value = this.baseDateFun(val);
      let temp = new Date(val).getTime();
      if (this.timeIndex == 1) {
        this.Query.startTime = value;
      } else {
        this.Query.endTime = value;
      }
      console.log(value, temp);
      this.dataStateVal = false;
    },
    cancelDateClick() {
      this.dataStateVal = false;
    },
    mapListsFun() {
      let self = this;
      let eComVisitChart = echarts.init(document.getElementById("main_map"));
      eComVisitChart.setOption({
        series: [
          {
            type: "pie",
            radius: [0, 80],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inner",
                textStyle: {
                  fontWeight: 100,
                  fontSize: 12
                },
                formatter: "{d}%"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            silent: true,
            color: self.xLists,
            data: self.yLists
          }
        ]
      });
    },
    async listFun() {
      let self = this;
      let params = {
        id: this.$route.query.id
      };
      let res = await taskApi.GetApiWebmessageboardlist(params);
      if (res.statusCode == 200) {
      } else {
        Toast({
          message: res.statusMessage,
          position: "bottom"
        });
      }
    }
  },
  filters: {},
  watch: {},
  computed: {}
};
</script>
<style scoped>
.box_title_search {
  width: 1.44rem;
  font-size: 0.3733rem;
  color: #fff;
  line-height: 0.72rem;
  text-align: center;
  height: 0.72rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.0533rem;
  background-color: #e7383e;
  margin-top: 0.32rem;
  margin-left: 0.32rem;
}
.box_nav i {
  font-size: 0.32rem;
  color: #000;
  margin-right: 0.1333rem;
}
.box_nav {
  height: 1.2rem;
  line-height: 1.2rem;
  background-color: #fff;
  font-size: 0.4267rem;
  color: #000;
  width: 100%;
  padding-left: 0.4rem;
  font-weight: 600;
}
.box_top {
  overflow: hidden;
  margin-bottom: 0.2667rem;
}
/* 时间筛选 */
.title_time_lf {
  width: 1.8667rem;
  height: 0.72rem;
  line-height: 0.72rem;
  padding-left: 0.32rem;
  font-size: 0.4rem;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(91, 98, 109, 1);
}
.title_time_lr {
  width: 0.9333rem;
  height: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.title_time_lr::after {
  position: absolute;
  left: 0rem;
  width: 0.0267rem;
  height: 0.5067rem;
  background: rgba(120, 120, 120, 0.32);
  top: 0.1067rem;
  content: "";
}
.title_time_lr i {
  color: #8c96a6;
  font-size: 0.3467rem;
}
.box_title_lf {
  width: 2.8rem;
  height: 0.72rem;
  background: rgba(248, 248, 248, 1);
  border-radius: 0.0533rem;
  margin-left: 0.4267rem;
  margin-top: 0.32rem;
}
.box_title_lr::after {
  position: absolute;
  left: -0.5867rem;
  width: 0.3467rem;
  height: 0.0267rem;
  background: rgba(235, 46, 51, 1);
  top: 0.2933rem;
  content: "";
}
.box_title_lr {
  width: 2.8rem;
  height: 0.72rem;
  background: rgba(248, 248, 248, 1);
  border-radius: 0.0533rem;
  margin-left: 0.88rem;
  margin-top: 0.32rem;
  position: relative;
}

.box_title {
  width: 100%;
  height: 1.3333rem;
  background: rgba(255, 255, 255, 1);
  margin-top: 0.1867rem;
}
/* 时间筛选 */

/* 图表 */
#main_map_line {
  width: 100%;
  overflow: hidden;
}

.box_main_echarts {
  width: calc(100% - 0.8rem);
  margin-left: 0.4rem;
  overflow: hidden;
  position: relative;
}
/* 图表 */
.box_main_bd {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
}
.box {
  background: #f6f6f6;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
}
</style>
